<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟数据监测原理</title>
</head>
<body>
    <script type="text/javascript">
        //1、准备一个data
        let data={
            name:"张三",
            age:18
        }

        //2、创建一个监视者
        function Observer(obj){
            //拿到传入的对象中的所有的key
            let  keys=Object.keys(obj)
            //遍历对象中所有的键值并为其指定set、get方法
            keys.forEach((k)=>{
                //往监视者方法的实例对象上追加属性
                Object.defineProperty(this,k,{
                    get(){
                        return obj[k]
                    },
                    set(val){
                        obj[k]=val
                        console.log(`${k}的值被修改了`)
                    }
                })
            })
        }

        //3、创建一个监视着的实例对象，并将data对象传入到监视者实例对象中进行监视
        const obs=new Observer(data);
        console.log(obs)

        //4、数据监视的原理
        let vm={

        }

        vm._data=data=obs

    </script>
</body>
</html>
